import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { BasicArea } from 'tea-chart/lib/basicarea';
import * as actionTypes from '@src/model/actionType';
import { get as _get } from 'lodash';

export function TransactionStatistics(props) {
  const ChainId = _get(props, ['ChainId'], '');
  // @ts-ignore
  const transactionStore = useSelector((state) => state.transactionReducer);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({ type: actionTypes.fetchTransactionNumByTime, params: { ChainId } });
    const t = setInterval(() => {
      dispatch({ type: actionTypes.fetchTransactionNumByTime, params: { ChainId } });
    }, 1000 * 10);
    return function clearup() {
      clearInterval(t);
    };
  }, [dispatch]);

  return (
    <div
      style={{
        width: `${props.width}px`,
        border: '1px solid #E2E2E2',
        boxSizing: 'border-box',
        height: `${props.height}px`,
        backgroundColor: '#fff',
        padding: '9px 13px',
      }}
    >
      <h6
        style={{
          fontSize: '12px',
          fontFamily: 'MicrosoftYaHei-Bold',
          color: '#333333',
        }}
      >
        最近10小时交易统计
      </h6>
      <BasicArea
        smooth
        height={props.areaheight}
        position="time*TxNum"
        dataSource={transactionStore.GroupList}
        areaStyle={{ fillOpacity: 0.17 }}
        tooltip={{
          formatter: (values) => {
            const { value, row } = values[0];
            return [{ value, valueText: `${value}`, color: '#007CFF', label: '交易数', title: `${row.time}` }];
          },
        }}
        theme={{
          color: ['#007CFF'],
          padding: {
            top: 0,
            left: 0,
            bottom: 4,
            right: 0,
          },
          xAxis: {
            tickColor: '#F2F2F2',
            tickLength: 6,
            labelColor: '#888888',
            labelFontSize: '10px',
          },
          yAxis: {
            labelFontSize: '10px',
            gridLineColor: '#F2F2F2',
            labelColor: '#888888',
            majorGridLineColor: '#DDDDDD',
          },
        }}
        xAxis={{
          enable: true,
          axisTick: { interval: 2 },
        }}
        yAxis={{
          enable: true,
        }}
      />
    </div>
  );
}
